<!--
 * @Description: 
 * @Author: 王紫琪
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 16:42:34
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom3" style="height: 95%"></div>
</template>
<script>
import { Column } from '@antv/g2plot';
export default {
  data(){
    return {
      dataArr:[{
    type: '百年孤独',
    sales: 52,
  },
  
  {
    type: '世说新语',
    sales: 45,
  },
  {
    type: '水浒传',
    sales: 48,
  },
  
  {
    type: '论语',
    sales: 38,
  },]
    }
  },
   mounted(){
     this.initChart()
   },
   methods:{
     initChart(){
       const column = new Column(this.$refs.bottom3,{
         data:this.dataArr,
         xField: 'type',
         yField: 'sales',
         tooltip:{
           fields:['ratio','sales'],
           domStyles:{
             'g2-tooltip':{
               padding:'5x',
               background:'rgba(47,6,178,0,8',
               color:'#fff',
               fontSize:'15px',

             }
           }
         }
       })
       column.render()
     }
   }
 
}
</script>